<template>
	<HeaderNav active-index="1"></HeaderNav>
	<TaskContainer>
	  <div style="margin-top: 20px;flex: 1 1 auto;">
		 <el-table :data="Studentlist" style="width: 100%" border ref="tb">
			 <el-table-column prop="id" label="序号"  width="60"/>
			 <el-table-column prop="name" label="学生名" width="120"/>
			 <el-table-column prop="email" label="邮箱" width="240"/>
			 <el-table-column prop="task_total_count" label="任务总数" width="90"/>
			 <el-table-column prop="task_count_1" label="未开始数量" width="100"/>
			 <el-table-column prop="task_count_2" label="未检查数量" width="100"/>
<!--			 <el-table-column prop="task_count_3" label="未检查数量" width="100"/>-->
			 <el-table-column prop="task_ncount" label="不会做" width="90"/>
			 <el-table-column prop="task_rate" label="完成率" width="90">
				 <template #default="scope">
					 <div style="display: flex; align-items: center">
					   <span style="margin-left: 10px"></span>
					 </div>
				 </template>
			 </el-table-column>
			 
			 <el-table-column fixed="right" label="操作">
			   <template #default="scope">
				 <el-button type="warning" size="small"  @click="handleApplyTask(scope.$index, scope.row)">分配任务</el-button>
				 <el-button type="info" size="small" @click="handleEdit(scope.$index, scope.row)">重置密码</el-button>
				 <el-button type="danger" size="small"  @click="handleDelete(scope.$index, scope.row)">禁用用户</el-button>
			   </template>
			 </el-table-column>
		</el-table>
		
		<!-- 添加分页插件 -->
		<div style="margin: 20px 0;">
		  <el-pagination background layout="prev, pager, next"
				hide-on-single-page
			   :page-size="pagination.rows"
			   :pager-count="11"
			   v-model:current-page="pagination.page"
			   :total="pagination.total" />
		</div>
	  </div>
	 </TaskContainer>
</template>
	
	<script>
	import HeaderNav from "@/components/HeaderNav.vue"
	import TaskContainer from "@/components/TaskContainer.vue"
	import Condition from "@/components/Condition.vue"
	export default {
		components: {
			HeaderNav,
			TaskContainer, 
			Condition,
		},
		data() {
			return {
				pagination: {
					page: 0,
					rows: 10,
          total:null,
				},

				Studentlist: [],
				
			}
		},
    created() {
      window.$bus.on('close-win-refresh',(index)=>{
        layer.close(index);
        this.getStudentList();
      });
      this.getStudentList();
    },
		methods: {
        // 查询用户表中所有学生
      getStudentList(){
        //调用接口获得所有学生信息
        this.$api.getStudentList(this.pagination).then(ret => {
          console.log(ret,"//////////")
          this.pagination.total = ret.length; // 假设 ret.count 包含了返回的学生总数
         // 使用 map 方法遍历 ret.results 数组，并构建一个新的对象数组
          this.Studentlist = ret.map(item => ({
            id: `${item.id}`, // 学生ID
            name: `${item.first_name}${item.last_name}`, // 学生姓名
            email: `${item.username}`, // 学生邮箱
            task_total_count: item.total_tasks, // 任务总数
            task_count_1: item.not_started_tasks, // 未开始任务数量
            task_count_2: item.not_checked_tasks, // 未检查任务数量
            task_ncount: item.cant_do_tasks, // 不会做的任务数量
            task_rate: item.task_completion_rate, // 任务完成率
          }));

        })
      },
      handleDelete(i,row){
        //禁用用户
        let id = row.id;
        this.$api.handleDelete(id).then(ret=>{
          console.log(ret)
          this.getStudentList()
          this.$layer.msg(ret.message)
          return false;
        })
      },
      handleEdit(i,row){
        //重置用户密码
        let id = row.id;
        this.$api.handleEdit(id).then(ret=>{
          this.getStudentList()
          this.$layer.msg(ret.message)
          return false;
        })


      },
			handleAdd(event) {
				this.$layer.open({
					type: 2,
					title: '添加模块',
					shadeClose: true,
					shade: 0.5,
					area: ['650px', '280px'],
					btn: ['保存', '关闭'] ,
					content: '/module/add',
					yes: (index, layero) => {
						layer.close(index);
					}
				})
			},
			batchRemove(event) {
				let rows = this.$refs.tb.getSelectionRows();
				console.log(rows);
			},
			handleApplyTask(index, row) {
				this.$layer.open({
					type: 2,
					title: '分配任务 - ' + row.name,
					shadeClose: true,
					shade: 0.5,
					area: ['1300px', '820px'],
					btn: ['保存', '关闭'] ,
					content: '/group/task-list',
					yes: (index, layero) => {
              // 获取 打开的 弹出层 窗口对象
            let iframeWin = window[layero.find('iframe')[0]['name']];
            // 向 mitt 消息总线 发送 update-clazz 事件, 并传入 index 索引
            // 在 弹出的 clazz/update 页面中 监听 update-clazz、并完成 班级的修改功能
            iframeWin.$bus.emit('assign-task', index);
					}
				})
			}
		}
	}
	</script>
	
	<style scoped>
	.table-modules {
		padding: 10px 20px;
	}
	.table-modules span {
		padding: 2px 10px;
		margin: 0 5px;
		border: 1px solid #ccc;
		border-radius: 4px;
	}
	
	.toolbar {
		position: relative;
		right: 10px;
		z-index: 200;
		text-align: right;
		margin: 20px;
		flex: 1 1 auto;
	}
	</style>